<template>
  <div class="nav flex justify-start items-center">
    <div class="logo cursor-pointer" @click="$router.push('/')">
      <img src="@/assets/images/home/logo.png" width="140" alt="" />
    </div>
    <div class="menu ml-10 flex-1">
      <Menu />
    </div>
    <div>
      <el-input
        v-model="searchText"
        class="w-50 m-2 searchInput"
        :placeholder="$t('nav.Search')"
        :suffix-icon="Search"
      />
    </div>
    <div class="ml-10">
      <LanguageBox />
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import Menu from "./menu.vue";
import LanguageBox from "./LanguageBox.vue";

const searchText = ref("");
</script>
<style lang="scss" scoped>
.nav {
  color: #fff;
  padding: 0 10%;
  width: 100%;
  height: 100%;
}
</style>
